<template>
  <div>
    <Button type="primary" @click="jsonPrint">打印</Button>
  </div>
</template>
<script lang="ts" setup>
//表单赋值
import { reactive, ref } from "vue";
import { printJS } from "/@/hooks/web/usePrintJS";
import { view } from "/@/views/full/account/types/AccountPrint.api";
import { filterObj } from "/@/utils/common/compUtils";
import { useMessage } from "/@/hooks/web/useMessage";

import { Button } from "/@/components/Button";

import dayjs from 'dayjs';
const { createMessage: $message } = useMessage();

const date = new Date()
let year  = dayjs(date).format('YYYY')
let month = dayjs(date).format('MM')
let day   = dayjs(date).format('DD')

let printList = reactive<any>({});  //业务收支明细

//获取数据 , 1625729754499584002, 1625729754524749825, 1625664690119708676, 1625664690119708677, 1625729754524749826, 1625729754524749827
async function getPrintDate() {
  let record = {ids: '1625729754499584002,1625664690119708674,1625729754524749825,1625664690119708677'}
  if (!record.ids) {
    alert("订单编号不能为空!");
    return;
  }
  view(filterObj(record)).then((res) => {
    try {
      if (res.success != true) {
        $message.warning(res.message)
        return false;
      }
      let result = res.result;
      //1、业务数据 - 初始化
      Object.assign(printList, result);
      jobPrintDate(result)
    } catch (e) {
      alert("initData : " + e);
      return false;
    }
  }).finally(() => {
    //data.loading = false
  });
}

//加工数据
async function jobPrintDate(data) {
  printList =  data
  if (!printList) {
    return false
  }
  console.info("jobPrintDate@@@", printList)
  var datahtml = '';
  //datahtml += '<view style="height: auto; display: block">';
  for(let k in printList) {
    datahtml += pageBreakAfter(printList[k].sffs);
    datahtml += '<h1 class="h1-page">费用报销单</h1>';
    datahtml += '<div class="header">';
    datahtml += '<div class="span-page left">';
    datahtml += '  <span>' + printList[k].sffsZW + '</span>';
    datahtml += '  <span>' + printList[k].orderId + '</span>';
    datahtml += '</div>';
    datahtml += '<div class="span-page right"><span style="width: 30mm">填表日期：</span>';
    datahtml += '<span style="width: 15mm"><label>' + year + '</label>年</span>';
    datahtml += '<span style="width: 10mm"><label>' + month + '</label>月</span>';
    datahtml += '<span style="width: 10mm"><label>' + day + '</label>日</span></div>';
    datahtml += '<div></div></div>';
    datahtml += '<table border="1" cellspacing="0" class="table-page">';
    datahtml += '<tr>';
    datahtml += '  <td class="td-left">部门</td>';
    datahtml += '  <td class="text-left" style="width: 90mm; height: 4mm; padding: 0 8px; line-height: 105%;">' + printList[k].dwmc + '</td>';
    datahtml += '  <td class="td-left">姓名</td>';
    datahtml += '  <td class="text-left"></td>';
    datahtml += '</tr>';
    datahtml += '<tr>';
    datahtml += '  <td class="td-left">报销事由</td>';
    datahtml += '  <td class="text-left" colspan="3" style="height: 135px; vertical-align:top; padding: 5px 8px;line-height: 110%; ">' + printList[k].bz + '</td>';
    datahtml += '</tr>';
    datahtml += '<tr>';
    datahtml += '  <td colspan="4" class="text-left">';
    datahtml += '    <label>报销单据</label>';
    datahtml += '    <span style="padding: 5px 20px 0px 15px;"></span>';
    datahtml += '    <label style="margin-right: 8px">张</label>';
    datahtml += '    <label>合计金额（大写）</label>';
    datahtml += '    <span class="zhlangje">' +printList[k].B0 + '</span>';
    datahtml += '    <label class="font-bold">拾</label>';
    datahtml += '    <span class="zhlangje">' +printList[k].B1 + '</span>';
    datahtml += '    <label class="font-bold">万</label>';
    datahtml += '    <span class="zhlangje">' +printList[k].B2 + '</span>';
    datahtml += '    <label class="font-bold">仟</label>';
    datahtml += '    <span class="zhlangje">' +printList[k].B3 + '</span>';
    datahtml += '    <label class="font-bold">佰</label>';
    datahtml += '    <span class="zhlangje">' +printList[k].B4 + '</span>';
    datahtml += '    <label class="font-bold">拾</label>';
    datahtml += '    <span class="zhlangje">' +printList[k].B5 + '</span>';
    datahtml += '    <label class="font-bold">元</label>';
    datahtml += '    <span class="zhlangje">' +printList[k].B6 + '</span>';
    datahtml += '    <label class="font-bold">角</label>';
    datahtml += '    <span class="zhlangje">' +printList[k].B7 + '</span>';
    datahtml += '    <label class="font-bold">分</label>';
    datahtml += '    <label>￥</label>';
    datahtml += '    <span class="zhlangje" style="text-align: left; margin-left: -5px">' +printList[k].je + '</span>';
    datahtml += '  </td>';
    datahtml += '</tr>';
    datahtml += '<tr>';
    datahtml += '  <td class="td-left">单位主管</td>';
    datahtml += '  <td class="text-left"></td>';
    datahtml += '  <td class="td-left">部门主管</td>';
    datahtml += '  <td class="text-left"></td>';
    datahtml += '</tr>';
    datahtml += '</table>';
    datahtml += '<div class="footer" style="font-size: 12px; padding: 5px 8px">';
    datahtml += '<div style="width: 50mm">会计主管</div>';
    datahtml += '  <div style="width: 44mm">审核</div>';
    datahtml += '  <div style="width: 44mm">出纳</div>';
    datahtml += '  <div style="width: 25mm">填报人</div>';
    datahtml += '</div>';

    let list = printList[k].accounts || ''
    let accounts = list.optionList
    if (printList[k].sffs == '3' && list && accounts) {
      datahtml += '<h4 class="h4-page">支出明细</h4>';
      datahtml += '<table border="1" cellspacing="0" class="table-account">';
      datahtml += '<tr>';
      datahtml += '  <th style="width: 30mm;">订单号</th>';
      datahtml += '  <th>订单名称</th>';
      datahtml += '  <th style="width: 25mm;">支出</th>';
      datahtml += '  <th style="width: 20mm;">操作人</th>';
      datahtml += '  <th style="width: 25mm;">操作时间</th>';
      datahtml += '</tr>';
      for(let o in accounts) {
        datahtml += '<tr>';
        datahtml += '  <td>'+ accounts[o].orderId +'</td>';
        datahtml += '  <td class="text-left">'+ accounts[o].travelLine +'</td>';
        datahtml += '  <td>'+ accounts[o].fkje +'</td>';
        datahtml += '  <td>'+ accounts[o].lrr +'</td>';
        datahtml += '  <td>'+ accounts[o].lrsj +'</td>';
        datahtml += '</tr>';
        datahtml += '<tr>';
        datahtml += '  <td style="">备注</td>';
        datahtml += '  <td class="text-left" colspan="4">'+ accounts[o].bz +'</td>';
        datahtml += '</tr>';
      }
      datahtml += '<tr>';
      datahtml += '  <td>合计</td>';
      datahtml += '  <td></td>';
      datahtml += '  <td>'+ list.sumfkje +'</td>';
      datahtml += '  <td></td>';
      datahtml += '  <td></td>';
      datahtml += '</tr>';
      datahtml += '</table>';
    }
  }
  //datahtml += '</view>';

  calPrintDate(datahtml)
}

//打印数据
async function calPrintDate(datahtml) {
  console.info("calPrintDate@@@", datahtml)
  printJS({
    printable: [], //表格的数据
    properties: [],
    type: "json",
    header: datahtml,
    targetStyles: ['*'],
    style: printPageStyle(),
    scanStyles: false
  });
}

//点击执行
function jsonPrint() {
  getPrintDate()
}

function printPageStyle() {
  let style =`
    @page{ size: auto A4 landscape; margin: 0; }
    .h1-page{
      position: relative;
      font-weight: 600;
      margin: 0 auto;
      text-align: center;
      top: 5mm;
      font-size: 22px;
      letter-spacing: 15px;
    }
    .header {
      width: 185mm;
      margin: 0 auto;
      margin-top: 6mm;
      margin-bottom: 1mm;
    }
    .header .span-page{
      width:80mm;
      font-size: 12px;
    }
    .header .span-page span{
      display: inline-block;
      height: 18px;
      line-height: 18px;
    }
    .header .span-page span label{
      font-size: 16px;
      font-weight: 500;
      padding: 0 2px;
      height: 14px;
      line-height: 16px;
    }
    .header .left {
      text-align:left;
      float:left;
    }
    .header .right {
      text-align:right;
      float:right;
    }

    table, table tr th, table tr td { border: 1px solid #808080; }
    table { line-height: 25px; border-collapse: collapse; font-size: 12px; width: 185mm; margin: 0 auto; text-align:center;}
    .table-page .text-left, .table-account .text-left { text-align:left; }
    .table-page td { padding: 5px 12px; }
    .table-page td span{
      padding: 5px 0px 0px 0px;
      font-size: 14px;
      border-bottom: 1px solid #808080;
    }
    .table-page td label{
      padding: 5px 0px 1px 0px;
      font-size: 12px;
    }
    .td-left {
      width: 18mm;
      text-align-last: justify;
    }
    .font-bold {
      font-weight: bold
    }
    .h4-page{ width: 185mm; margin: 0 auto; margin-bottom: 3px}
    .footer{
      width: 185mm;
      height: 25px;
      margin: 0 auto;
    }
    .footer div{
      display: inline-block;
      float: left;
    }
  `
  return style
}

function pageBreakAfter(sffs) {
  if (sffs == '3') {
    return '<div style="page-break-after: always;"></div>'
  } else {
    return ''
  }
}

</script>
<style lang="less" scoped>


</style>
